<template>
  <div>
    <div class="clt-header">
      <div>
        <img class="clt-logo" src="../../../assets/logo/clt-logo-zx.png" />
        <span class="header_title"></span>
      </div>
      <div class="cm-line"></div>
    </div>
    <div class="clt-main">
      <div
        class="cm-content"
        :class="index == 1 || index == 3 ? 'cm-content1' : ''"
        v-for="(item, index) in cltList"
        :key="index"
      >
        <div class="cm-title">{{ item.firstTitle }}</div>
        <div class="clt-my_wrap" :class="index == 0 || index == 1 ? 'clt-my_wrap1' : ''">
          <div class="clt-module_header">
            <p class="clt-title">{{ item.title }}</p>
          </div>
          <div class="clt-module_content">
            <div class="content_item_wrap">
              <div class="num_wrap">
                <div class="content_num">{{ item.value }}</div>
                <div class="content_unit">{{ item.unit }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lj: 26093.48,
      ljkh: 7089,
      ljjybs: 35639,
      timerLjjy: null,
      timerOther: null,
      cltList: [
        {
          title: '累计商户交易量',
          value: null,
          unit: '万元',
          firstTitle: '商户交易量',
        },
        {
          title: '累计注册商户数',
          value: null,
          unit: '户',
          firstTitle: '注册商户数',
        },

        {
          title: '累计商户融资金额',
          value: null,
          unit: '万元',
          firstTitle: '商户融资金额',
        },

        {
          title: '累计融资商户数',
          value: null,
          unit: '户',
          firstTitle: '融资商户数',
        },
      ],
    }
  },
  props: ['qgData', 'shopNum'],
  mounted() {
    this.ljkh = this.shopNum
    this.initTimerLjjy()
    this.initTimerOther()
  },
  beforeDestroy() {
    clearInterval(this.timerLjjy)
    this.timerLjjy = null

    clearInterval(this.timerOther)
    this.timerOther = null
  },
  methods: {
    initTimerLjjy() {
      let _ = this
      let tempMoney = this.accAdd(_.qgData['04'][1].value, _.qgData['09'][0].value)
      let tempM = this.accAdd(tempMoney, 20000.0)
      this.cltList[0].value = parseFloat(tempM).toFixed(2)
      this.timerLjjy = setInterval(() => {
        let temp = _.accAdd(_.qgData['04'][1].value, _.qgData['09'][0].value)
        let tempN = _.accAdd(temp, 20000.0)
        _.cltList[0].value = parseFloat(_.accAdd(tempN, _.mathRandom(0.5, 1))).toFixed(2)
      }, 600000)
    },
    initTimerOther() {
      let _ = this
      this.queryLjkh()
      this.timerOther = setInterval(() => {
        _.queryLjkhOther()
      }, 3600000)
    },
    queryLjkh() {
      let _ = this
      _.cltList[1].value = _.ljkh
      _.cltList[2].value = parseFloat(_.accAdd(_.qgData['04'][1].value, 20000.0)).toFixed(2)
      _.cltList[3].value = _.cltList[1].value - (_.qgData['01'][0].value - _.qgData['03'][1].value)
    },
    queryLjkhOther() {
      let _ = this
      _.cltList[1].value = _.ljkh
      _.cltList[1].value = _.cltList[1].value + 1
      let temp = _.accAdd(_.qgData['04'][1].value, 20000.0)
      _.cltList[2].value = parseFloat(_.accAdd(temp, _.mathRandom(200, 800))).toFixed(2)
      _.cltList[3].value = _.cltList[1].value - (_.qgData['01'][0].value - _.qgData['03'][1].value)
    },
    mathRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    accAdd(num1, num2) {
      let r1, r2, m, c
      try {
        r1 = num1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = num2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      c = Math.abs(r1 - r2)
      m = Math.pow(10, Math.max(r1, r2))
      if (c > 0) {
        let cm = Math.pow(10, c)
        if (r1 > r2) {
          num1 = Number(num1.toString().replace('.', ''))
          num2 = Number(num2.toString().replace('.', '')) * cm
        } else {
          num1 = Number(num1.toString().replace('.', '')) * cm
          num2 = Number(num2.toString().replace('.', ''))
        }
      } else {
        num1 = Number(num1.toString().replace('.', ''))
        num2 = Number(num2.toString().replace('.', ''))
      }
      return (num1 + num2) / m
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../right/newOneRight/rightBase.css';
.clt-header {
  width: 100%;
  height: 280px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .cm-line {
    width: 100%;
    height: 20px;
    /*background: url('../../../assets/images/header_line.png') no-repeat;*/
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .clt-logo {
    height: 132px;
    top: -3px;
    position: relative;
    left: -6px;
  }
  .header_title {
    font-size: 120px;
    line-height: 120px;
    font-family: 'FZDHTJW--GB1-0, FZDHTJW--GB1';
    background: linear-gradient(to bottom, rgb(124, 158, 183) 0%, rgb(168, 209, 233) 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding-bottom: 28px;
  }
}

.clt-main {
  position: absolute;
  top: 280px;
  right: 0px;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  z-index: 999;
  .cm-content {
    width: 704px;
    float: left;
    margin: 0 30px 30px 118px;
    .cm-title {
      /*padding-left: 118px;*/
      width: 100%;
      margin-top: 18px;
      height: 84px;
      float: left;
      color: #fff;
      font-size: 60px;
      margin-bottom: 30px;
    }
    .clt-my_wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      background: url('../../../assets/images/module_bgc.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      height: 646px;
      float: left;

      .clt-module_content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        .content_item_wrap {
          position: relative;
          top: -100px;
        }
        .content_num {
          font-size: 100px;
        }
        .content_unit {
          font-size: 50px;
        }
      }
    }
    .clt-my_wrap1 {
      margin-bottom: 31px;
      margin-top: 3px;
    }
  }

  .cm-content1 {
    margin: 0 64px 30px 0;
  }
  .clt-module_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .clt-title {
    font-size: 52px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 150px 0 76px 0;
  }
}
</style>
